<template>
  <div class="">
    <base-form :form-data="searchData" :fields="searchForm">
      <template #footer-button>
        <BaseTableToolbar  :fields="formColumns" :url="url" :primary-ids="primaryKeys"/>
      </template>
    </base-form>
    <el-table
        :data="list"
        size="small"
        v-loading="loading"
        height="600px"
        border
        style="width: 100%">
      <el-table-column type="index" fixed="left"></el-table-column>
<!--      <el-table-column :type="type" fixed="left" v-if="type === 'checkbox'"></el-table-column>-->
<!--      <el-table-column :type="type" fixed="left" v-else-if="type === 'radio'"></el-table-column>-->
      <template v-for="colum in tableColumns">
        <el-table-column
            v-if="colum.type !== 'action'"
            :label="colum.title"
            :align="colum.align"
            :prop="colum.key"
            v-on="colum.on"
            v-bind="colum.attrs"
        >
          <template v-slot:default="{row,$index}" v-if="colum.slot">
            <slot :name="colum.slot" :row="row" :index="$index"></slot>
          </template>
        </el-table-column>
        <el-table-column v-else type="action" fixed="right">
          <template v-slot:default="{row,$index}" >
            <BaseTableAction
                :fields="formColumns"
                :column="colum"
                :primary-id="row[primaryKey]"
                :index="$index"
                :row="row"
                :url="url"
            ></BaseTableAction>
          </template>
        </el-table-column>
      </template>

    </el-table>
    <el-pagination
        class="mar-tb-10px"
        align="right"
        size="small"
        background
        layout="prev, pager, next"
        :current-page="pageNumber"
        :page-size="20"
        @current-change="nexPage"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import BaseTableToolbar from "./BaseTableToolbar.vue";
import http from "network/http";

export default {
  name: "BaseTable",
  components: {BaseTableToolbar},

  props: {
    primaryKey: {
      type: String ,
      required: true
    },
    loading: false ,
    type: {
      type: String ,
      default: "checkbox"
    },
    url: {
      type: String ,
      required: true
    },
    method:{
      type: String ,
      default: 'POST'
    },
    params: {
      type: Function ,
      default(){
        return new Function() ;
      }
    } ,
    columns:{
      type: Array ,
      required: true
    }
  },
  data(){
    return {
      list: [] ,
      total: 0 ,
      pageNumber: 1 ,
      searchData:{},
      primaryKeys: []
    }
  },
  mounted(){
    this.queryListByPage() ;
  },
  computed:{
    formColumns(){
      return this.columns.filter((col)=>{
        return col.form === true
      })
    },
    tableColumns() {
      return this.columns.filter((col)=>{
        return col.table !== false
      })
    },
    searchForm(){
      return this.columns.filter((col)=>{
        return col.search === true
      })
    }
  },
  methods:{
    nexPage(page){
      this.pageNumber = page ;
      this.queryListByPage()
    },
    queryListByPage(){
      let params = {
        items: this.params() || [],
        page: this.pageNumber
      }
      http.post(`${this.url}/listByPage`,params).then(res=>{
        console.log(res)
        this.list = res.data.rows ;
         this.total = res.data.total
      })
    },
    getComponent(){

    }
  }
}
</script>
<style scoped>

</style>
